<template>
  <div>
    <!-- vant搜索 -->
    <van-search
      @input="onInput"
      autofocus
      show-action
      shape="round"
      v-model="search"
      placeholder="请输入搜索关键词"
    >
      <template #left>
        <van-icon
          @click="back"
          style="margin-right: 5px"
          size="22px"
          name="arrow-left"
        />
      </template>

      <template #action>
        <van-button
          @click="onSearch"
          size="small"
          type="danger"
          style="border-radius: 5px; font-size: 14px"
          >搜索</van-button
        >
      </template>
    </van-search>

    <!-- 搜索历史 -->
    <div v-show="isShow">
      <div class="search-host">
        <span>搜索记录：</span>
        <van-icon name="delete" @click="del" />
      </div>

      <div>
        <van-tag
          v-for="(item, index) in searchList"
          :key="index"
          @click="searchTs(item)"
          style="margin: 5px"
          >{{ item }}</van-tag
        >
      </div>
    </div>

    <!-- 搜索提示 -->
    <van-cell-group v-show="!isShow">
      <van-cell
        v-for="(item, index) in showList"
        :key="index"
        :title="item.title"
        @click="searchTs(item.title)"
      />
    </van-cell-group>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      search: "",
      isShow: true,
      list: [], //所有数据
      showList: [], //搜索提示数据
      searchList: [], //搜索记录
      //   searchAll: [],
    };
  },
  created() {
    //初始化保存
    let searchlist = localStorage.searchList;
    if (searchlist) {
      this.searchList = JSON.parse(searchlist);
    }
  },
  // mounted() {
  // 	this.$axios.get("/api/demo/web2/public/index.php/admin/article/articleall.html").then(res=>{
  // 		// console.log(res.data.data)
  // 		this.list = res.data.data
  // 	})
  // },
  methods: {
    back() {
      //返回
      this.$router.push({
        path: "/home",
      });
    },
    onInput() {
      //搜索提示
      this.showList = [];

      this.list.map((item) => {
        if (item.title.includes(this.search)) {
          this.showList.push(item);
        }
      });

      if (this.search.trim() == "") {
        //显示或隐藏搜索提示
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    searchTs(title) {
      //点击搜索提示或搜索记录，展示对应商品
      this.$router.push({
        path: "/showlist",
        query: {
          search: title,
        },
      });
      if (!this.searchList.includes(title)) {
        //不会重复添加相同搜索记录
        this.searchList.push(title);
        localStorage.searchList = JSON.stringify(this.searchList);
      }
    },
    onSearch() {
      //确定搜索或点击搜索时触发
      if (this.search.trim() == "") {
        //判断内容是否为空
        Toast.fail("请先输入搜索内容！");
      } else {
        // axios
        //   .get("/api/qbs/api/article_serach.php?search=" + this.search)
        //   .then((response) => {
        //     console.log(response.data.data);
        //     this.searchAll = response.data.data;
        //     // console.log(item);
        //   });
        this.$router.push({
          path: "/showlist",
          query: {
            search: this.search,
          },
        });
      }

      if (!this.searchList.includes(this.search.trim())) {
        //不会重复添加相同搜索记录
        this.searchList.push(this.search);
        localStorage.searchList = JSON.stringify(this.searchList);
      }
    },
    del() {
      //删除搜索记录
      this.$dialog
        .confirm({
          message: "确定要清空搜索记录吗？",
        })
        .then(() => {
          this.searchList = [];
          localStorage.searchList = JSON.stringify(this.searchList);
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style scoped>
.search-host {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
  box-sizing: border-box;
}
.van-button::before {
  color: lightpink;
}
.van-search__content {
  border: 1px solid lightpink;
}
.van-icon::before {
  color: lightpink;
}
.van-button--danger {
  background-color: lightpink;
  border: 1px solid lightpink;
}
</style>
